<template>
  <div>
    <div v-if="studyingList.length > 0 || alltobeStudyList.length > 0">
      <!-- 学习中 -->
      <div v-if="studyingList.length > 0" style="margin-bottom: 32rpx">
        <div class="study_title">学习中课程</div>
        <div v-if="studyingList.length > 0" class="study_list">
          <courseItem
            v-for="item in studyingList"
            :key="item.courseId"
            :item="item"
            type="studying"
          ></courseItem>
        </div>
        <van-empty v-else description="暂无学习中课程" />
      </div>

      <!-- 未学习 -->
      <div v-if="alltobeStudyList.length > 0">
        <div class="study_title">待学习课程</div>
        <van-tabs
          :value="activeName"
          color="#ff4d03"
          @change="tabchange"
          v-if="alltobeStudyList.length > 0"
        >
          <van-tab
            :title="`必修 ${creditInfo.compulsoryCreditStu}/${
              creditInfo.compulsoryCredit ? creditInfo.compulsoryCredit : 0
            }`"
          ></van-tab>
          <van-tab
            :title="`选修 ${creditInfo.optionalCreditStu}/${
              creditInfo.optionalCredit ? creditInfo.optionalCredit : 0
            }`"
          ></van-tab>
          <van-tab
            :title="`考证 ${creditInfo.competitionCreditStu}/${
              creditInfo.competitionCredit ? creditInfo.competitionCredit : 0
            }`"
          ></van-tab>
          <van-tab
            :title="`工学 ${creditInfo.engineeringCreditStu}/${
              creditInfo.engineeringCredit ? creditInfo.engineeringCredit : 0
            }`"
          ></van-tab>
        </van-tabs>
        <div v-if="tobeStudyList.length > 0" class="study_list">
          <courseItem
            v-for="(item, index) in tobeStudyList"
            :key="index"
            :item="item"
            type="tobestudy"
          ></courseItem>
        </div>
        <van-empty
          v-if="tobeStudyList.length == 0"
          description="暂无待学习课程"
        />
      </div>
    </div>
    <van-empty
      v-if="studyingList.length == 0 && alltobeStudyList.length == 0"
      description="暂无课程"
    />
  </div>
</template>

<script>
import {
  learningCourseList,
  selectCourseList,
  selectioncredit,
} from "@/common/api/course.js";
import courseItem from "@/components/courseItem.vue";
export default {
  components: { courseItem },
  name: "selectiCourse",
  data() {
    return {
      activeName: 0,
      creditInfo: "",
      // 学习中课程
      studyingList: [1],
      // 待学习列表
      alltobeStudyList: [1],
      tobeStudyList: [1],
    };
  },
  onShow() {
    this.getList();
  },
  methods: {
    tabchange(e) {
      this.activeName = e.detail.index;
      this.tobeStudyList = this.alltobeStudyList.filter((item) => {
        return item.type == this.activeName;
      });
    },
    /* 获取课程列表 */
    async getList() {
      uni.showLoading({ mask: true,title: "加载中" });
      let [res1, res2, res3] = await Promise.all([
        learningCourseList(uni.getStorageSync("stuId")),
        selectCourseList(uni.getStorageSync("stuId")),
        selectioncredit(),
      ]);

      console.log(res1, res2, res3);
      //studyStatus 0未开始 1学习中 2已学习
      this.studyingList = res1.data.filter((item) => {
        return item.studyStatus !== 2;
      });
      this.alltobeStudyList = res2.data;
      this.creditInfo = res3.data;
      this.tobeStudyList = this.alltobeStudyList.filter((item) => {
        return item.type == this.activeName;
      });
      console.log(this.alltobeStudyList, this.studyingList);
    },
  },
};
</script>

<style scoped lang='scss'>
.study_title {
  background: white;
  padding: 28rpx 0 16rpx 32rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;
  line-height: 44rpx;
}
</style>
